<script lang="ts" setup>
import { IPagination } from '@/api/app';
import { bookReaderModel, IBookReader } from '@/api/borrow/borrow';
import { FormConfig } from '@/components/Form/types';
import { useRequest } from '@/hooks/useRequest';
import { NButton, NInput, NPopconfirm, NSelect } from 'naive-ui';
import { h, Ref, ref, unref, withModifiers } from 'vue';

const searchForm = ref<Pick<IBookReader, 'bookName' | 'readerName' | 'status'>>({
  bookName: '',
  readerName: '',
  status: ''
});

const searchConfig: FormConfig<typeof searchForm.value>[] = [
  {
    type: 'component',
    label: '书籍名称:',
    component: NInput,
    key: 'bookName',
    span: 8
  },
  {
    type: 'component',
    label: '读者名称:',
    component: NInput,
    key: 'readerName',
    span: 8
  },
  {
    type: 'component',
    label: '状态:',
    component: NSelect,
    key: 'status',
    span: 8,
    props: {
      options: [
        { value: '', label: '全部' },
        { value: 0, label: '未归还' },
        { value: 1, label: '已归还' },
        { value: 2, label: '无法归还' }
      ]
    }
  },
  {
    type: 'slot',
    slotName: 'search',
    span: 24
  }
];

const { data, run, loading } = useRequest(bookReaderModel.records, { manual: true });

async function search(pagination: Ref<IPagination>) {
  const { pageNum, pageSize } = pagination.value;
  const params = {
    pageNum,
    pageSize,
    ...unref(searchForm)
  };
  await run(params);
  pagination.value.total = data.value.total;
}

const columns = [
  {
    title: '书籍名称',
    key: 'bookName'
  },
  {
    title: '读者名称',
    key: 'readerName'
  },
  {
    title: '封面图',
    key: 'cover',
    render(row) {
      return h(
        'img',
        { src: row.cover, class: 'w-120px' }
      );
    }
  },
  {
    title: '借阅时间',
    key: 'createTime'
  },
  {
    title: '归还时间',
    key: 'repayTime'
  },
  {
    title: '状态',
    key: 'status',
    render(row) {
      return h(
        'div',
        {},
        { default: () => ({ 0: '未归还', 1: '已归还', 2: '无法归还' }[row.status]) }
      );
    }
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(
        'div',
        { class: 'flex gap-mini justify-center' },
        {
          default: () => [
            row.status !== 0 ?
            '' :
            h(
              'div',
              { onClick: withModifiers(() => '', ['stop']), class: 'text-0 flex gap-mini justify-center' },
              { default: () => [
                h(
                  NPopconfirm,
                  { onPositiveClick: async () => {
                    await bookReaderModel.updateStatus({ ...row, status: 1 });
                    _search(1);
                  } },
                  { default: '是否确认归还?', trigger: () => h(NButton, { type: 'primary', size: 'tiny' }, '归还') }
                ),
                h(
                  NPopconfirm,
                  { onPositiveClick: async () => {
                    await bookReaderModel.updateStatus({ ...row, status: 2 });
                    _search(1);
                  } },
                  { default: '是否确认无法归还?', trigger: () => h(NButton, { type: 'error', size: 'tiny' }, '无法归还') }
                )
              ]}
            )
          ]
        }
      );
    }
  }
];

const bookReaderTable = ref();
function _search(pageNum: number) {
  bookReaderTable.value.search(pageNum);
}

</script>

<template>
  <div class="bg-white min-h-[calc(100vh-124px)] p-normal">
    <Form
      v-model:data="searchForm"
      :config="searchConfig"
    >
      <template #search>
        <div class="flex justify-end gap-mini">
          <NButton type="primary" @click="_search(1)">查询</NButton>
        </div>
      </template>
    </Form>
    <Table
      ref="bookReaderTable"
      :loading="loading"
      :data="data?.list"
      :search="search"
      :columns="columns"
    />
  </div>
</template>
